<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于字符编码的密文加密与解密</title>
    <style>
        body {
            margin: 10px 0 0;
        }

        button {
            user-select: none;
            margin: 0 1px;
        }

        input {
            margin: 0 0 0 4px;
        }

        label {
            margin: 0 1px;
            display: flex;
            align-items: center;
        }

        p {
            margin: 10px 0 0;
            padding: 4px;
            background-color: #cfc;
        }

        #ctrl_p {
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 4px 0;
            bottom: 0;
            flex-wrap: wrap;
            background-color: #aae;
        }
    </style>
</head>

<body>
    <section id="outTextArea"></section>
    <section id="ctrl_p">
        <label class="outputRadix">
            加密输出进制:
            <input type="radio" name="outputRadix" id="Bin" value="2">
            2进制
            <input type="radio" name="outputRadix" id="Oct" value="8">
            8进制
            <input type="radio" name="outputRadix" id="Dec" value="10">
            10进制
            <input type="radio" name="outputRadix" id="Hex" value="16" checked=true>
            16进制
            <input type="radio" name="outputRadix" id="JZ32" value="32">
            32进制
        </label>
        <button onclick="nencryption()">加密</button>
        <button onclick="decrypt()">解密</button>
    </section>
</body>
<script>
    // str.charCodeAt(index) 返回在指定的位置的字符的 Unicode 编码。
    // String.fromCharCode(n1, n2, ..., nX) 将 Unicode 编码转为字符。
    // number.toString(radix) 进制转换，返回值为字符串
    // var t = "Hello World 你好世界";
    // console.log("a0f2".toUpperCase());
    //封装加密函数
    // B，Binary（二进制）； H，Hex（十六进制）； O，Octal（八进制）； D，Decimal（十进制）。
    function nencryption() {
        var Ciphertext = '';//初始化密文字符串
        var inText = window.prompt("输入待加密文本");//获取输入文本
        var outputRadix = getValue('.outputRadix');//获取进制数
        for (let i = 0; i < inText.length; i++) {
            console.log('索引-' + inText[i], `${outputRadix}进制表达-` + inText.charCodeAt(i).toString(outputRadix));//控制台打印
            Ciphertext += inText.charCodeAt(i).toString(outputRadix).toUpperCase();//获取字符编码转outputRadix进制并拼接-转大写
            if (i != inText.length - 1)//空格分隔
                Ciphertext += ' '
        }
        console.log('字符编码-' + Ciphertext);//控制台打印
        document.querySelector('#outTextArea').innerHTML += `<p>${Ciphertext}</p>`;//打印
    }

    // 封装解密函数
    function decrypt() {
        var Plaintext = '';//初始化明文字符串
        var inTextArr = window.prompt("输入待解密文本").split(' ');//获取输入文本并按空格分割为数组
        var outputRadix = getValue('.outputRadix');//获取进制数
        for (let i = 0; i < inTextArr.length; i++) {
            console.log('索引-' + inTextArr[i], `${outputRadix}进制字符码-` + parseInt(inTextArr[i], outputRadix), '对应明文-' + String.fromCharCode(parseInt(inTextArr[i], outputRadix)));//控制台打印
            Plaintext += String.fromCharCode(parseInt(inTextArr[i], outputRadix));//获取字符编码由outputRadix进制转为10进制再转为字符并拼接
        }
        console.log('明文全文-' + Plaintext);//控制台打印
        document.querySelector('#outTextArea').innerHTML += `<p>${Plaintext}</p>`;//打印
    }

    //封装单选框取值函数
    function getValue(inputName) {
        var arr = document.querySelectorAll(`${inputName} input`);
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].checked) {//返回选中单选框的值
                console.log(arr[i].value);
                return arr[i].value;
            }
        }
    }
</script>

</html>